<script>
import { videoList } from '@/api/experiment'
import VideoPreview from './components/VideoPreview'

export default {
  components: {
    VideoPreview
  },
  data() {
    return {
      query: {
        fileName: '',
        pageNum: 1,
        pageSize: 10
      },
      tableList: [],
      total: 0
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      videoList(this.query.pageNum, this.query.pageSize, this.query.fileName).then(res => {
        this.tableList = res.data['records']
        this.total = res.data['total']
      })
    },
    handleQuery() {
      this.query.pageNum = 1
      this.initData()
    },
    handleReset() {
      this.query.fileName = ''
      this.initData()
    },
    handleSizeChange(e) {
      this.query.pageNum = 1
      this.query.pageSize = e
      this.initData()
    },
    handleCurrentChange(e) {
      this.query.pageNum = e
      this.initData()
    },
    handleViewVideo(e, n) {
      this.$refs.refVideoPreview.$show(e, n)
    }
  }
}
</script>

<template>
  <div class='experiment-video-container'>
    <div class='query-container'>
      <el-form label-position='top' inline>
        <el-form-item :label="$locale('experiment.components.video.Name')">
          <el-input v-model='query.fileName' :placeholder="$locale('experiment.components.video.Please enter the video name')" clearable />
        </el-form-item>
      </el-form>
      <div style='display: flex; align-items: center;'>
        <el-button type='primary' @click='handleQuery'>{{ $locale('experiment.components.list.query') }}</el-button>
        <el-button @click='handleReset'>{{ $locale('geWudevice.reset') }}</el-button>
      </div>
    </div>
    <div class='table-container'>
      <el-table :data='tableList'>
        <el-table-column label='#' type='index' />
        <el-table-column :label="$locale('experiment.components.video.Name')" prop='videoName' />
        <el-table-column :label="$locale('classList.add.notes')" prop='remark' />
        <el-table-column :label="$locale('formMarkering.list.operate')" width='85px'>
          <template slot-scope='scope'>
            <el-button type='text' @click="handleViewVideo(scope.row['videoUrl'], scope.row['videoName'])">{{ $locale('experiment.components.video.play') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class='page-container'>
      <el-pagination :current-page="query.pageNum"
                     :page-sizes="[10, 50, 100, 200, 500]"
                     :page-size="query.pageSize"
                     :total='total'
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change='handleSizeChange'
                     @current-change='handleCurrentChange' />
    </div>
    <video-preview ref='refVideoPreview' />
  </div>
</template>

<style lang='scss'>
.experiment-video-container {
  height: 100%;
  padding: 15px;

  .query-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .page-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 12px;
  }
}
</style>
